<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body>div{
				width: 200px;
				height: 200px;
				border: 1px solid red;
				/* 当元素的所有子元素全部浮动时 自动识别的高度为0
				   后面元素回顶上了导致显示异常，通过给元素添加
				   overflow:hidden
				 */
				overflow: hidden;
			}
			#d1{
				width: 50px;
				height: 50px;
				background-color: red;
			}
			#d2{
				width: 50px;
				height: 50px;
				background-color: green;
				float: left;
			}
			#d3{
				width: 50px;
				height: 50px;
				background-color: blue;
				float: left;
			}
		</style>
	</head>
	<body>
		<div id="d1"></div>
		<div id="d2"></div>
		<div id="d3"></div>
	</body>
</html>
